<div class="pb15" *ngIf="(model | json) === '{}'">
  <nz-empty nzNotFoundImage="simple" [nzNotFoundContent]="contentTpl">
    <ng-template #contentTpl>
      <span i18n>Click the Send button to get a test report</span>
    </ng-template>
  </nz-empty>
</div>
<div class="p15" *ngIf="model && (model | json) !== '{}'">
  <!-- Status Bar -->
  <div *ngIf="model?.statusCode"
    class="mb15 basic_info_bar cw f_row f_js {{ model.statusCode ? codeStatus.class : 'code_red' }}">
    <div class="fs16" id="statusCode">{{ model.statusCode || 'No Response' }}</div>
    <div class="f_row_ac fs12">
      <span class="mr15" id="size">Size: {{ model.responseLength | byteToString }}</span>
      <span id="time">Time: {{ model.testDeny }}ms</span>
    </div>
  </div>
  <!-- Test Alert Tip -->
  <nz-alert class="eo_alert_bar" *ngFor="let item of model.reportList"
    [nzType]="item.type === 'interrupt' ? 'error' : 'info'" [nzMessage]="item.content?.toString()" nzShowIcon>
  </nz-alert>
  <!-- Response -->
  <div *ngIf="model.responseType">
    <ng-container *ngIf="responseIsImg; else stream">
      <img class="maw_100percent" [src]="imgBlobUrl" />
    </ng-container>
    <ng-template #stream>
      <ng-container *ngIf="model.responseType === 'stream' && model.responseLength > 500000; else longText">
        <div class="text-center">
          <span i18n>Unable to preview non-text type data, you can</span>
          <button class="eo_theme_btn_default mlr5" type="button" (click)="downloadResponseText()"
            i18n="@@downloadResponse">
            download response
          </button>
          <span i18n>and open it with other programs.</span>
        </div>
      </ng-container>
    </ng-template>
    <ng-template #longText>
      <ng-container *ngIf="model.responseType === 'longText' && model.responseLength > 500000; else other">
        <div class="text-center">
          <span i18n>The response result exceeds the previewable size, you can</span>
          <button i18n="@@downloadResponse" class="eo_theme_btn_default mlr5" type="button"
            (click)="downloadResponseText()">
            download response
          </button>
          <!-- or
        <button class="eo_theme_btn_default" type="button" (click)="newTabResponseText()">在新标签页中显示返回结果</button>
        and open it with other programs. -->
        </div>
      </ng-container>
    </ng-template>
    <ng-template #other>
      <eo-monaco-editor class="mt20" [autoFormat]="true" [code]="model.body" [config]="{ readOnly: true }"
        [isBase64]="['longText', 'stream'].includes(model.responseType)"
        [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
    </ng-template>
  </div>
